<template>
  <div>
    <div style="padding-bottom: 40px; height: 100px">
      <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        accept="xlsx,xls,csv"
        :customRequest="customRequest"
        @change="handleChange"
        @drop="handleDrop"
        :maxCount="1"
      >
        <div style="display: flex; align-items: center; justify-content: center">
          <UploadOutlined style="color: #1677ff; font-size: 26px; margin-right: 8px" />
          <span style="font-size: 18px">点击或拖拽上传文件(支持xlsx,xls,csv文件)</span>
        </div>
      </a-upload-dragger>
    </div>
    <div class="table-operations">
      <a-button type="primary" size="small" @click="clear" ghost>清空</a-button>
    </div>
    <a-table
      :scroll="columns.length > 7 ? { x: 1000, y: 500 } : { y: 500 }"
      bordered
      size="small"
      :dataSource="dataSource"
      :columns="columns"
      style="margin-top: 8px"
    />
  </div>
</template>
<script lang="ts" setup>
import { UploadOutlined } from '@ant-design/icons-vue'
import * as XLSX from 'xlsx'

import { ref, computed } from 'vue'
const fileList = ref([])
const dataSource = ref<any[]>([])
const columns = ref<any[]>([
  {
    title: '请选择文件',
    dataIndex: '请选择文件',
    key: 'xx'
  }
])

const handleDrop = () => {}

const customRequest = async (options: any) => {
  const { onSuccess, onError, file, onProgress } = options
  Promise.resolve().then(() => {
    onSuccess('upload success')
  })
}

const getColumns = (): any[] => {
  return columns.value
}

const getDataSource = () => {
  return dataSource.value
}

const clear = () => {
  dataSource.value = []
  columns.value = [
    {
      title: '请选择文件',
      dataIndex: '请选择文件',
      key: 'xx'
    }
  ]
  fileList.value = []
}

/**
 * @name: 上传文件调用
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2021-08-12
 */
const handleChange = (event: any) => {
  const file = event.file.originFileObj
  const reader = new FileReader()
  // 处理文件内容
  reader.onload = (e: any) => {
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: 'array' })

    const worksheet = workbook.Sheets[workbook.SheetNames[0]]
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[]
    // 提前文件内容
    const _headers: string[] = jsonData[0]
    const _rows = jsonData
      .slice(1)
      .filter((v) => v.length)
      .map((row: any, index: number) => {
        const _row: Record<string, any> = {}
        let uid: string = ''
        _headers.forEach((header: string, hIndex: number) => {
          _row[header] = row[hIndex]
          uid += row[hIndex]
        })
        return {
          index: index + 1,
          uid,
          ..._row
        }
      })
    columns.value = _headers.map((v) => ({
      title: v,
      dataIndex: v,
      key: v
    }))
    dataSource.value = _rows
  }
  // 读取文件内容
  reader.readAsArrayBuffer(file)
  // reader.readAsBinaryString(file)
}

defineExpose({
  getDataSource,
  getColumns,
  clear
})
</script>
<style lang="less" scoped></style>
